import { useState, useEffect } from 'react';
import styles from './index.scss';
import { fetchList } from '../../service/statistics';
import Card from './components/card';
import ChartGather from '@/components/ChartGather';
import { Image } from 'antd';
export default function IndexPage() {
    const [charList, setcharList] = useState<any[]>([]);
    const [state, setstate] = useState<{
        bookList: any[];
        visit?: any;
    }>({
        bookList: [],
    });
    const getNum = (sum: any, max: any, type?: number) => {
        if (type) return parseInt((max / sum) * 100);
        return parseInt(((sum - max) / sum) * 100);
    };
    const dataSourceRequest = async () => {
        const response = await fetchList();
        if (response?.code === 200) {
            const data = response?.data as any;
            let bookList = data?.hot_book as any[];
            let visit_count = data?.visit_count as any[];
            let visit = {
                id: `-1`,
                name: '近15天到馆人数',
                type: 'line',
                data: visit_count,
            };
            setstate({
                bookList,
                visit,
            });
            let list = data?.time_count as any[];
            let newlist = list?.map((item, index) => {
                let arr: any[] = [
                    {
                        id: `${index}1`,
                        name: '借阅总量',
                        type: 'pie',
                        data: [
                            {
                                type: '库存量',
                                value: getNum(
                                    item.book_count,
                                    item.book_borrow_count,
                                ),
                            },
                            {
                                type: '租赁量',
                                value: getNum(
                                    item.book_count,
                                    item.book_borrow_count,
                                    1,
                                ),
                            },
                        ],
                    },
                    // {
                    //     id: `${index}2`,
                    //     name: '归还量',
                    //     type: 'pie',
                    //     data: [
                    //         {
                    //             type: '已归还',
                    //             value: item.book_borrow_return_count,
                    //         },
                    //         {
                    //             type: '未归还',
                    //             value:
                    //                 item.book_borrow_count -
                    //                 item.book_borrow_return_count,
                    //         },
                    //     ],
                    // },
                    {
                        id: `${index}4`,
                        name: '借阅年龄排行版',
                        type: 'columnar',
                        data: item.age_count.map((i: any) => {
                            return {
                                type: i.age,
                                sales: i.count,
                            };
                        }),
                    },
                    {
                        id: `${index}3`,
                        name: '借阅类型排行版',
                        type: 'columnar',
                        data: item.cate_count.map((i: any) => {
                            return {
                                type: i.cate_name,
                                sales: i.count,
                            };
                        }),
                    },
                ];
                return arr;
            });
            setcharList(newlist);
        }
    };
    useEffect(() => {
        dataSourceRequest();
    }, []);
    return (
        <div className={styles.content}>
            <div className={styles.topDiv}>
                <div style={{ marginBottom: '15px' }}>最受欢迎书籍Top9</div>
                <div
                    style={{
                        display: 'flex',
                    }}
                >
                    {state?.bookList.map((item, index) => {
                        return (
                            <div
                                key={item.isbn}
                                style={{
                                    display: 'inline-block',
                                    position: 'relative',
                                    marginRight: '10px',
                                }}
                            >
                                <div
                                    style={{
                                        background: '#ddd',
                                        padding: '5px',
                                        borderRadius: '4px',
                                    }}
                                >
                                    <span className={styles.tag}>
                                        No.{index + 1}
                                    </span>
                                    <Image
                                        style={{ padding: '15px' }}
                                        preview={false}
                                        src={item.img_url}
                                    />
                                </div>
                                <div className={styles.title}>
                                    {item.book_name}
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
            <div style={{ margin: '15px 20px' }}>
                {[0, 1, 2]?.map((item: any) => {
                    return (
                        charList.length > 0 && (
                            <Card key={item} charList={charList} index={item} />
                        )
                    );
                })}
            </div>
            {state?.visit && (
                <div
                    style={{
                        borderRadius: '4px',
                        boxShadow: '0px 2px 6px 0px rgb(0 0 0 / 40%)',
                        margin: '15px 20px',
                        padding: '15px',
                    }}
                >
                    <div>
                        <div style={{ marginBottom: '20px' }}>
                            {state?.visit.name}
                        </div>
                    </div>
                    <ChartGather {...state?.visit} />
                </div>
            )}
        </div>
    );
}
function toFixed(arg0: number) {
    throw new Error('Function not implemented.');
}
